<!DOCTYPE HTML>
<!--
	Eventually by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>

<head>
    <title>Sync-Sofa - Options</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="assets/css/main.css" />
    <style>
        body {
            background-image: linear-gradient(to top, #1cb495, rgba(46, 49, 65, 0.8));
            padding: 20px;
        }

        #mainform select {
            width: 10%;
        }

        div#debug {
            margin-top: 35px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked+.slider {
            background-color: #1fcaa7;
        }

        input:focus+.slider {
            box-shadow: 0 0 1px #1fcaa7;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        p {
            margin: 0 0 1rem 0;
        }
    </style>
</head>

<body>
    <div>
        <h3>Change server host:</h3>
        <p>If you choose to alter or deploy the backend side on your own server, you can type in the host + port and
            change protocol below:
        </p>
    </div>


    <div id="mainform" class="option">
        <select id="protocol">
            <option value="https" selected="selected">HTTPS</option>
            <option value="http">HTTP</option>

        </select>

        <input type="text" id="inputbox" autocomplete="off"/>
        <input type="submit" value="CONFIRM" id="confirmbutton" style="display:block" />
        <input type="submit" value="RESET" id="resetbutton" style="display:block" />
    </div>


    <div id="debug">
        <h3>Debug mode:</h3>
        <p><b>Notices:</b> If you are not in trouble or you are not trying to provide bug information to help us, you may not need
            to
            change this option.
        </p>
        <label class="switch">
            <input type="checkbox" id="debugtoggle">
            <span class="slider round"></span>
        </label>
    </div>

    <div id="chat">
        <h3>Chat feature:</h3>
        <p>Choose whether you need our built-in chat, notice that chat information are not end-to-end encrypted, please do not share sensitive information such as bank account or password. We assume that you fully understand that if you switch on the chat feature. </p>
        <label class="switch">
            <input type="checkbox" id="chattoggle">
            <span class="slider round"></span>
        </label>
    </div>


    <div id="notification">
        <h3>System notification:</h3>
        <p>If true, we will use system notification. If you always watch videos with fullscreen or with VLC, we recommend you turn on this feature.</p>
        <label class="switch">
            <input type="checkbox" id="notificationtoggle">
            <span class="slider round"></span>
        </label>
    </div>



    <script src="options.js"></script>
    <script src="sweetalert.min.js"></script>

</body>

</html>
